<ion-content class="content">
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button (click)="goback()">
                <ion-icon name="chevron-back-outline" class="global-back"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title mode="ios">添加朋友</ion-title>
    </ion-toolbar>

    <div class="search">
        <ion-icon name="search-outline"></ion-icon>
        <ion-text>&nbsp;&nbsp;微信号/手机号</ion-text>
    </div>

    <div class="me">
        <ion-label>我的微信号：{{username}}&nbsp;&nbsp;</ion-label>
        <ion-icon name="qr-code-outline"></ion-icon>
    </div>

    <ion-list class="funtions">
        <ion-item [routerLink]="['']">
            <ion-avatar slot="start" class="common-icon radio">
                <ion-icon name="radio-outline"></ion-icon>
            </ion-avatar>
            <ion-label>
                <h2>雷达加朋友</h2>
                <h4>添加身边的朋友</h4>
            </ion-label>
            <ion-icon class="link" slot="end" name="chevron-forward-outline"></ion-icon>
        </ion-item>

        <ion-item [routerLink]="['']">
            <ion-avatar slot="start" class="common-icon people">
                <ion-icon name="people-outline"></ion-icon>
            </ion-avatar>
            <ion-label>
                <h2>面对面建群</h2>
                <h4>与身边的朋友进入同一个群聊</h4>
            </ion-label>
            <ion-icon class="link" slot="end" name="chevron-forward-outline"></ion-icon>
        </ion-item>

        <ion-item [routerLink]="['']">
            <ion-avatar slot="start" class="common-icon scan">
                <ion-icon name="scan-outline"></ion-icon>
            </ion-avatar>
            <ion-label>
                <h2>扫一扫</h2>
                <h4>扫描二维码名片</h4>
            </ion-label>
            <ion-icon class="link" slot="end" name="chevron-forward-outline"></ion-icon>
        </ion-item>

        <ion-item [routerLink]="['/contacts/contacts-mobile']">
            <ion-avatar slot="start" class="common-icon person-add">
                <ion-icon name="person-add-outline"></ion-icon>
            </ion-avatar>
            <ion-label>
                <h2>手机联系人</h2>
                <h4>添加或邀请通讯录中的朋友</h4>
            </ion-label>
            <ion-icon class="link" slot="end" name="chevron-forward-outline"></ion-icon>
        </ion-item>

        <ion-item [routerLink]="['']">
            <ion-avatar slot="start" class="common-icon person">
                <ion-icon name="person-outline"></ion-icon>
            </ion-avatar>
            <ion-label>
                <h2>公众号</h2>
                <h4>获取更多资讯和服务</h4>
            </ion-label>
            <ion-icon class="link" slot="end" name="chevron-forward-outline"></ion-icon>
        </ion-item>

        <ion-item lines="none" [routerLink]="['']">
            <ion-avatar slot="start" class="common-icon chatbubble">
                <ion-icon name="chatbubble-outline"></ion-icon>
            </ion-avatar>
            <ion-label>
                <h2>企业微信联系人</h2>
                <h4>通过手机号搜索企业微信用户</h4>
            </ion-label>
            <ion-icon class="link" slot="end" name="chevron-forward-outline"></ion-icon>
        </ion-item>
    </ion-list>
</ion-content>